import { useState, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Button, Input, TextArea } from '@nutui/nutui-react'
import { Eye, Marshalling,Phone } from '@nutui/icons-react'
import {  message, } from 'antd';
import axios from 'axios'
export default function Login() {
  const [inputType, setInputType] = useState('password')
  const [user,setuser]=useState("")
  const [password,setpassword]=useState("")
  const [email,setemail]=useState("")
  const [messageApi, contextHolder] = message.useMessage();
  const nav=useNavigate()
  function debounce(func, delay) {
    let timer = null;
    return function(...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func.apply(this, args);
            // 执行完后可以将定时器置空，方便下次重新创建定时器
            timer = null;
        }, delay);
    };
}
let handleLogin=async()=>{
  let {data:{data,code,msg}}=await axios.post("http://localhost:3000/login",{user,password,email})
  if(code==200){
    nav("/shou/index")
    localStorage.setItem("userInfo",user)
    messageApi.open({
      type: 'success',
      content: 'This is a success message',
    });
  }
}
  return (
    <div>
      <div style={{textAlign:"center"}}>
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.VQie14Lx7VZjKuJjCRiBFwHaFR?rs=1&pid=ImgDetMain" alt="" style={{ width: "160px", height: "150px" }} />
      </div>
      <Form
        labelPosition="right"
        footer={
          <>
            <Button nativeType="submit" block type="primary" onClick={()=>{
              handleLogin(handleLogin,3000)
            }}>
              登录
            </Button>
          </>
        }
      >
        <Form.Item
          align="center"
          required
          name="username"
          rules={[
            { max: 20, message: '用户名和邮箱不能超过20个字' },
            { required: true, message: '请输入用户名或邮箱' },
            {
              validator: value => {
                return value.length > 20
              },
            },
          ]}
        >
          <Input
            className="nut-input-text"
            placeholder="请输入用户名或邮箱"
            type="text"
            clearable 
            value={user}
            onChange={(val) => {
              console.log(val);
              if(val.includes("@")){
               setemail(val)
              }else{
                setuser(val)
              }
            }}
          />
        </Form.Item>
        <Form.Item
          required
          name="password"
          rules={[
            { max: 8, message: '密码不能太简单' },
            { required: true, message: '请输入密码' },
            {
              validator: value => {
                return value.length > 8
              },
            },
          ]}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              background: '#fff',
              // padding: '0 10px',
            }}
          >
            <Input type={inputType} placeholder="请输入密码" clearable  value={password} onChange={(val)=>{
              setpassword(val)
            }} />
            <div
              className="right"
              onClick={() =>
                setInputType(inputType === 'text' ? 'password' : 'text')
              }
            >
              {inputType === 'text' ? (
                <Eye color="var(--nutui-gray-7)" />
              ) : (
                <Marshalling color="var(--nutui-gray-7)" />
              )}
            </div>
          </div>
        </Form.Item>
      </Form>
      <div style={{paddingTop:"10px",display:"flex",justifyContent:"space-around"}}>
        <span onClick={()=>{
          nav("/app/login_p")
        }}><Phone size="20px"/> 手机号登录</span>
        <span onClick={()=>nav("/app/face")}>人脸登录</span>
        <span onClick={()=>{
          nav("/app/register")
        }}>免费注册</span>
      </div>
    </div>
  )
}
